/*
 * @Author: peng.chen2 peng.chen2@rt-mart.com
 * @Date: 2025-07-25 11:00:00
 * @LastEditors: peng.chen2
 * @LastEditTime: 2025-08-01 09:49:29
 * @FilePath: /rt-monitoring/src/config/antd.ts
 * @Description: Ant Design 主题配置
 */

import React from 'react'
import type { ThemeConfig } from 'antd'

// 主题色彩变量
export const themeColors = {
  primary: '#00d4ff',
  primaryHover: '#40e0ff',
  primaryActive: '#0066ff',
  success: '#00ff88',
  warning: '#ffaa40',
  error: '#ff4d4f',
  info: '#0066ff',

  // 背景色
  bgBase: '#0f1c3c',
  bgContainer: 'rgba(6, 30, 93, 0.5)',
  bgElevated: 'rgba(16, 66, 126, 0.8)',
  bgLayout: '#0f1c3c',

  // 文字色
  textPrimary: '#ffffff',
  textSecondary: 'rgba(255, 255, 255, 0.7)',
  textTertiary: 'rgba(255, 255, 255, 0.5)',
  textQuaternary: 'rgba(255, 255, 255, 0.3)',

  // 边框色
  borderPrimary: 'rgba(0, 149, 255, 0.3)',
  borderSecondary: 'rgba(0, 149, 255, 0.2)',
  borderLight: 'rgba(0, 149, 255, 0.1)',
}

// 间距变量
export const themeSpacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  xxl: 24,
}

// 公共主题配置
const commonToken: ThemeConfig['token'] = {
  // 字体
  fontFamily: "'Microsoft YaHei', sans-serif",
  fontSize: 14,
  fontSizeLG: 16,
  fontSizeXL: 18,

  // 圆角
  borderRadius: 6,
  borderRadiusLG: 8,
  borderRadiusXS: 4,

  // 间距
  padding: themeSpacing.md,
  paddingLG: themeSpacing.lg,
  paddingXL: themeSpacing.xl,
  paddingXS: themeSpacing.xs,
  paddingSM: themeSpacing.sm,
}
// 监控大屏专用的 Ant Design 主题配置
export const darkTheme: ThemeConfig = {
  token: {
    // 主色调 - 使用你的监控大屏蓝色
    colorPrimary: themeColors.primary,
    colorPrimaryHover: themeColors.primaryHover,
    colorPrimaryActive: themeColors.primaryActive,
    colorSuccess: themeColors.success,
    colorWarning: themeColors.warning,
    colorError: themeColors.error,
    colorInfo: themeColors.info,

    // 背景色 - 适配深色监控界面
    colorBgBase: themeColors.bgBase,
    colorBgContainer: themeColors.bgContainer,
    colorBgElevated: themeColors.bgElevated,
    colorBgLayout: themeColors.bgLayout,

    // 文字颜色
    colorText: themeColors.textPrimary,
    colorTextSecondary: themeColors.textSecondary,
    colorTextTertiary: themeColors.textTertiary,
    colorTextQuaternary: themeColors.textQuaternary,

    // 边框颜色
    colorBorder: themeColors.borderPrimary,
    colorBorderSecondary: themeColors.borderSecondary,

    // 阴影
    boxShadow: '0 0 15px rgba(0, 149, 255, 0.2)',
    boxShadowSecondary: '0 0 10px rgba(0, 149, 255, 0.1)',
    boxShadowTertiary: '0 0 5px rgba(0, 149, 255, 0.05)',

    // 控制项
    controlItemBgHover: 'rgba(0, 212, 255, 0.1)',
    controlItemBgActive: 'rgba(0, 149, 255, 0.2)',
    controlItemBgActiveHover: 'rgba(0, 149, 255, 0.3)',
    colorFill: 'rgba(0, 149, 255, 0.1)',
    colorFillSecondary: 'rgba(0, 149, 255, 0.05)',
    colorFillTertiary: 'rgba(0, 149, 255, 0.03)',
    ...commonToken,
  },
  components: {
    // Button 组件定制
    Button: {
      colorPrimary: themeColors.primary,
      colorPrimaryHover: themeColors.primaryHover,
      colorPrimaryActive: themeColors.primaryActive,
      defaultBorderColor: themeColors.borderPrimary,
      defaultColor: themeColors.textPrimary,
      primaryShadow: '0 0 10px rgba(0, 212, 255, 0.3)',
      algorithm: true,
    },
    // Table 组件定制
    Table: {
      headerBg: 'rgba(0, 100, 200, 0.3)',
      headerColor: themeColors.primary,
      bodySortBg: 'rgba(0, 149, 255, 0.1)',
      rowHoverBg: 'rgba(0, 149, 255, 0.1)',
      borderColor: themeColors.borderLight,
      headerBorderRadius: 6,
      cellPaddingBlock: themeSpacing.md,
      cellPaddingInline: themeSpacing.lg,
    },

    // Tabs 组件定制
    Tabs: {
      cardBg: themeColors.bgContainer,
      itemColor: themeColors.textSecondary,
      itemSelectedColor: themeColors.primary,
      itemHoverColor: themeColors.primaryHover,
      inkBarColor: themeColors.primary,
      cardPadding: `${themeSpacing.sm}px ${themeSpacing.lg}px`,
    },

    // Tag 组件定制
    Tag: {
      colorBgContainer: 'rgba(0, 149, 255, 0.1)',
      colorBorder: themeColors.borderPrimary,
      colorText: themeColors.textPrimary,
    },

    // Card 组件定制
    Card: {
      colorBgContainer: themeColors.bgContainer,
      colorBorderSecondary: themeColors.borderPrimary,
      headerBg: 'rgba(0, 100, 200, 0.2)',
      boxShadowTertiary: '0 0 15px rgba(0, 149, 255, 0.2)',
    },

    // Input 组件定制
    Input: {
      colorBgContainer: themeColors.bgContainer,
      colorBorder: themeColors.borderPrimary,
      colorText: themeColors.textPrimary,
      colorTextPlaceholder: themeColors.textTertiary,
    },

    // Select 组件定制
    Select: {
      colorBgContainer: themeColors.bgContainer,
      colorBgElevated: themeColors.bgElevated,
      colorBorder: themeColors.borderPrimary,
      optionSelectedBg: 'rgba(0, 149, 255, 0.2)',
    },

    // Menu 组件定制
    Menu: {
      colorBgContainer: themeColors.bgContainer,
      colorItemBgSelected: 'rgba(0, 149, 255, 0.3)',
      colorItemTextSelected: themeColors.primary,
      colorItemBgHover: 'rgba(0, 149, 255, 0.1)',
    },

    // Modal 组件定制
    Modal: {
      contentBg: themeColors.bgElevated,
      headerBg: 'rgba(16, 66, 126, 0.8)',
    },
  },
}

// 亮色主题配置
export const lightTheme: ThemeConfig = {
  token: {
    colorPrimary: '#0066ff',
    colorBgBase: '#ffffff',
    colorBgContainer: '#ffffff',
    colorText: '#000000',
    colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
    colorBorder: '#d9d9d9',
    ...commonToken,
  },
  components: {
    Table: {
      headerBg: '#fafafa',
      rowHoverBg: '#f5f5f5',
    },
    Card: {
      colorBgContainer: '#ffffff',
    },
  },
}

// 主题切换 Hook
export const useTheme = () => {
  const [isDark, setIsDark] = React.useState(true)

  const toggleTheme = () => {
    setIsDark(!isDark)
  }

  const currentTheme = isDark ? darkTheme : lightTheme

  return {
    isDark,
    toggleTheme,
    currentTheme,
  }
}
